<template>
	<view class="cart" id="cart">
		<view v-if="showHeader" class="status" :style="{ position: headerPosition, top: statusTop }"></view>
		<!-- <view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}">
			<view class="title">购物车</view>
		</view> -->
		<!-- 占位 -->
		<!-- <view v-if="showHeader" class="place"></view> -->
		<!-- 商品列表 -->
		<!-- 提货点 -->
		<view class="dianpu_list" v-if="location.shop_name && location.shop_name !== ''">
			<image :src="location.head_img" mode=""></image>
			<view class="right_box" @tap="jumpPosition">
				<p class="p1">
					<text class="text0">{{ location.shop_name }}</text>
					<text class="text2">距离您：{{location.range}}公里</text>
				</p>
				<p class="p2">{{location.mobile}}</p>
				<p class="p3">
					<image src="/static/img/home/morenweizhi.png" mode=""></image>
					<text class="text1">{{location.address || '请选择提货点'}}</text>
				</p>
			</view>
			<p class="moren" v-if="item.status == 0" :style="{ background: colors.color }">服务点</p>
		</view>
		<view class="dianpu_list" v-else>
			<p class="p4"  @tap="jumpPosition">
				<image src="../../../static/img/user/dizhi.png" mode=""></image>
				<text>请选择您的地址</text>
			</p>
		</view>
		<view class="goods-list" v-if="goodsList.length !== 0">
			<view class="row" v-for="(row, index) in goodsList" :key="index">
				<!-- 删除按钮 -->
				<view class="menu" @tap.stop="deleteGoods(row)"><view class="icon shanchu"></view></view>
				<!-- 商品 -->
				<view
					class="carrier"
					:class="[theIndex == index ? 'open' : oldIndex == index ? 'close' : '']"
					@touchstart="touchStart(index, $event)"
					@touchmove="touchMove(index, $event)"
					@touchend="touchEnd(index, $event)"
				>
					<!-- checkbox -->
					<view class="checkbox-box" @tap="selected(index)">
						<view class="checkbox" :style="{ borderColor: colors.color }"><view :class="[row.selected ? 'on' : '']" :style="{ background: colors.color }"></view></view>
					</view>
					<!-- 商品信息 -->
					<view class="goods-info" @tap="toGoods(row)">
						<view class="img"><image :src="row.img"></image></view>
						<view class="info">
							<view class="title">{{ row.title }}</view>
							<view class="spec">规格：{{ row.option_title || '暂无规格' }}</view>
							<view class="price-number">
								<view class="price" v-if="row.is_activity == 1">￥{{ row.activity_price }}</view>
								<view class="price" v-else>￥{{ row.price }}</view>
								<view class="number">
									<view class="sub" @tap.stop="sub(row)"><view class="icon jian"></view></view>
									<view class="input" @tap.stop="discard"><input type="number" disabled v-model="row.num" @input="sum($event, index)" /></view>
									<view class="add" :style="{ background: colors.color }" @tap.stop="add(row)"><view class="icon jia"></view></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 如果没有商品 -->
		<view class="notGood" v-else>
			<image src="../../../static/img/nullgoods.png" mode=""></image>
			<p class="tips">购物车空空的,快去购买吧</p>
			<p class="p2" :style="{ background: colors.color }" @tap="jumpNext">随便逛逛</p>
		</view>
		<!-- 底部广告 -->
		<view style="overflow: hidden;"  v-if="activityData[0].img && activityData[0].img!==''"><image class="guanggao" :src="activityData[0].img" @tap="jumpXianshi"></image></view>
		<!-- <image src="../../../static/img/home/xianshi.png" mode="" class="guanggao" @tap="jumpXianshi"></image> -->
		<!-- 脚部菜单 -->
		<view class="footer" :style="{ bottom: footerbottom }" v-if="goodsList.length !== 0">
			<view class="checkbox-box" @tap="allSelect">
				<view class="checkbox" :style="{ borderColor: colors.color }"><view :class="[isAllselected ? 'on' : '']" :style="{background:colors.color}"></view></view>
				<view class="text">全选</view>
			</view>
			<view class="delBtn" :style="{ color: colors.color, borderColor: colors.color }" @tap="deleteList" v-if="selectedList.length > 0">删除</view>
			<view class="settlement">
				<view class="sum" :style="{ color: colors.color }">
					合计:
					<view class="money" :style="{ color: colors.color }">￥{{ sumPrice }}</view>
				</view>
				<view class="btn" :style="{ background: colors.color }" @tap="toConfirmation">去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getColorCofig,setGoodData,getlocation } from '../../../static/utils/ahth.js';
export default {
	data() {
		return {
			colors: {},
			sumPrice: '0.00',
			headerPosition: 'fixed',
			headerTop: null,
			statusTop: null,
			showHeader: true,
			selectedList: [],
			isAllselected: false,
			goodsList: [],
			//控制滑动效果
			theIndex: null,
			oldIndex: null,
			isStop: false,
			location:{},
			activityData:{}
		};
	},
	filters:{
		setRange(value){
			if(!value){
				return 0
			}
			let data = Number(value) / 1000
			let newdata = data.toFixed(1)
			console.log(newdata)
			return newdata
		}
	},
	onShow() {
		this.isAllselected = false
		this.colors = getColorCofig();
		console.log('重新获取的颜色', this.colors);
		this.getUserInfo()
		this.getGoods();
		this.getGoodList()
		this.sumPrice = 0.00
		this.location = getlocation()
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		this.headerPosition = e.scrollTop >= 0 ? 'fixed' : 'absolute';
		this.headerTop = e.scrollTop >= 0 ? null : 0;
		this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
	},
	//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
	onPullDownRefresh() {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onLoad() {
		//兼容H5下结算条位置
		// #ifdef H5
		this.footerbottom = document.getElementsByTagName('uni-tabbar')[0].offsetHeight + 'px';
		// #endif
		// #ifdef APP-PLUS
		this.showHeader = false;
		this.statusHeight = plus.navigator.getStatusbarHeight();
		// #endif
	},
	methods: {
		//加入商品 参数 goods:商品数据
		joinGoods(goods) {
			/*
			 * 这里只是展示一种添加逻辑，模板并没有做从其他页面加入商品到购物车的具体动作，
			 * 在实际应用上，前端并不会直接插入记录到goodsList这一个动作，一般是更新列表和本地列表缓存。
			 * 一般商城购物车的增删改动作是由后端来完成的,
			 * 后端记录后返回前端更新前端缓存
			 */
			let len = this.goodsList.length;
			let isFind = false; //是否找到ID一样的商品
			for (let i = 0; i < len; i++) {
				let row = this.goodsList[i];
				if (row.id == goods.id) {
					//找到商品一样的商品
					this.goodsList[i].num++; //数量自增
					isFind = true; //找到一样的商品
					break; //跳出循环
				}
			}
			if (!isFind) {
				//没有找到一样的商品，新增一行到购物车商品列表头部
				this.goodsList[i].unshift(goods);
			}
		},
		//控制左滑删除效果-begin
		touchStart(index, event) {
			//多点触控不触发
			if (event.touches.length > 1) {
				this.isStop = true;
				return;
			}
			this.oldIndex = this.theIndex;
			this.theIndex = null;
			//初始坐标
			this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
		},
		touchMove(index, event) {
			//多点触控不触发
			if (event.touches.length > 1) {
				this.isStop = true;
				return;
			}
			let moveX = event.touches[0].pageX - this.initXY[0];
			let moveY = event.touches[0].pageY - this.initXY[1];

			if (this.isStop || Math.abs(moveX) < 5) {
				return;
			}
			if (Math.abs(moveY) > Math.abs(moveX)) {
				// 竖向滑动-不触发左滑效果
				this.isStop = true;
				return;
			}

			if (moveX < 0) {
				this.theIndex = index;
				this.isStop = true;
			} else if (moveX > 0) {
				if (this.theIndex != null && this.oldIndex == this.theIndex) {
					this.oldIndex = index;
					this.theIndex = null;
					this.isStop = true;
					setTimeout(() => {
						this.oldIndex = null;
					}, 150);
				}
			}
		},
		touchEnd(index, $event) {
			//结束禁止触发效果
			this.isStop = false;
		},
		//控制左滑删除效果-end

		//商品跳转
		toGoods(e) {
			let type = 0
			if(e.is_activity == 1){
				type = 3
			}
			this.$Router.push({
				path: '/pagesA/pages/goods/goodsDetails',query:{
					goodid: e.goods_id,
					type: type
				}
			});
		},
		jumpPosition() {
			//跳转到选择提货点
			this.$Router.push({
				path: '/pages/home/setlocation'
			});
		},
		getGoodList(){//获取活动专区
			this.request('goods/getActivityList',{
				page: this.pageIndex,
				psize: 10
			}).then(res=>{
				console.log(res)
				this.activityData = res.data.activity
			})
		},
		getGoods() {
			//获取购物车列表
			this.request('cart/getCartList', {}).then(res => {
				console.log(res);
				this.goodsList = res.data;
			});
		},
		getUserInfo(){
			this.request('user/getUserInfo', {}).then(res => {
				// this.locationId = res.data.goods_point_id;
				// this.getdefault(res.data.goods_point_id)
			});
		},
		getdefault(id){//获取用户默认的提货点
			this.request('user/getGoodsPointLeaderInfo', {
				type: 1,
				type_id: id
			}).then(res => {
				console.log(res)
				this.location = res.data
			});
		},
		jumpNext(){
			this.$Router.pushTab({path:'/pages/tabBar/home/home'})
		},
		//跳转确认订单页面
		toConfirmation() {
			let tmpList = [];
			let len = this.goodsList.length;
			for (let i = 0; i < len; i++) {
				if (this.goodsList[i].selected) {
					tmpList.push(this.goodsList[i]);
				}
			}
			if (tmpList.length < 1) {
				uni.showToast({
					title: '请选择商品结算',
					icon: 'none'
				});
				return;
			}
			setGoodData(tmpList)
			this.$Router.push({
				path:'/pagesA/pages/order/confirmation'
			})
			console.log(tmpList)
		},
		//删除商品
		deleteGoods(row) {
			console.log(row);
			this.request('cart/delCart', {
				id: row.id
			}).then(res => {
				for(var i = 0; i<this.goodsList.length; i++){
					let data = this.goodsList[i]
					if(data.id == row.id){
						this.goodsList.splice(i, 1);
					}
				}
				console.log('这是选中的',);
				for(var i = 0; i<this.selectedList.length; i++){
					let data = this.selectedList[i]
					if(data == row.id){
						this.selectedList.splice(i, 1);
					}
				}
				this.isAllselected = this.selectedList.length == this.goodsList.length && this.goodsList.length>0;
				setTimeout(()=>{
					this.sum();
				}, 500)
				this.oldIndex = null;
				this.theIndex = null;
			});
		},
		// 批量删除商品s
		deleteList() {
			let good = this.selectedList.join(',')
			console.log(good)
			this.request('cart/delCart',{
				id: good
			}).then(res=>{
				console.log(res)
				this.getGoods()
				this.selectedList = [];
				this.isAllselected = this.selectedList.length == this.goodsList.length && this.goodsList.length > 0;
				this.sum();
			})
		},
		// 选中商品
		selected(index) {
			this.goodsList[index].selected = this.goodsList[index].selected ? false : true;
			let i = this.selectedList.indexOf(this.goodsList[index].id);
			console.log(i);
			i > -1 ? this.selectedList.splice(i, 1) : this.selectedList.push(this.goodsList[index].id);
			this.isAllselected = this.selectedList.length == this.goodsList.length;
			this.sum();
		},
		//全选
		allSelect() {
			let len = this.goodsList.length;
			let arr = [];
			for (let i = 0; i < len; i++) {
				this.goodsList[i].selected = this.isAllselected ? false : true;
				arr.push(this.goodsList[i].id);
			}
			this.selectedList = this.isAllselected ? [] : arr;
			this.isAllselected = this.isAllselected || this.goodsList.length == 0 ? false : true;
			this.sum();
			console.log(this.selectedList);
		},
		// 减少数量
		sub(row) {
			console.log(row)
			this.request('cart/decCart', {
				goods_id: row.goods_id,
				option_id: row.option_id
			}).then(res => {
				console.log(res);
				this.getGoods();
				this.sum();
			});
		},
		// 增加数量
		add(row) {
			this.request('cart/addCart', {
				goods_id: row.goods_id,
				option_id: row.option_id
			}).then(res => {
				console.log(res);
				this.getGoods();
				this.sum();
			});
		},
		// 合计
		sum(e, index) {
			this.sumPrice = 0;
			let len = this.goodsList.length;
			for (let i = 0; i < len; i++) {
				if (this.goodsList[i].selected) {
					if (e && i == index) {
						if(this.goodsList[i].is_activity == 1){
							this.sumPrice = this.sumPrice + e.detail.value * this.goodsList[i].activity_price;
						}else{
							this.sumPrice = this.sumPrice + e.detail.value * this.goodsList[i].price;
						}
						
					} else {
						if(this.goodsList[i].is_activity == 1){
							this.sumPrice = this.sumPrice + this.goodsList[i].num * this.goodsList[i].activity_price;
						}else{
							this.sumPrice = this.sumPrice + this.goodsList[i].num * this.goodsList[i].price;
						}	
					}
				}
			}
			this.sumPrice = this.sumPrice.toFixed(2);
		},
		discard() {
			//丢弃
		},
		jumpXianshi() {
			this.$Router.push({
				path: '/pagesA/pages/home/limitedTime'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.cart {
	overflow: hidden;
	position: relative;
}
page {
	position: relative;
	background-color: #fff;
}
.checkbox-box {
	display: flex;
	align-items: center;
	.checkbox {
		width: 35upx;
		height: 35upx;
		border-radius: 100%;
		border: solid 2upx #ff0000;
		display: flex;
		justify-content: center;
		align-items: center;
		.on {
			width: 25upx;
			height: 25upx;
			border-radius: 100%;
			background-color: #ff0000;
		}
	}
	.text {
		margin-left: 10upx;
		font-size: 28upx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: rgba(51, 51, 51, 1);
	}
}
.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	background-color: #fff;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
}

.header {
	width: 92%;
	padding: 0 4%;
	height: 100upx;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: #fff;
	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);
	/*  #endif  */
	.title {
		font-size: 36upx;
	}
}
.place {
	background-color: #ffffff;
	height: 100upx;
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
}
.goods-list {
	width: 100%;
	padding: 20upx 0 20upx 0;
	overflow: hidden;
	margin-bottom: 300upx;
	.tis {
		width: 100%;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
	}
	.row {
		width: calc(92%);
		height: calc(22vw + 40upx);
		margin: 20upx auto;

		border-radius: 15upx;
		box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		z-index: 4;
		border: 0;
		.menu {
			.icon {
				color: #fff;
				// font-size: 25upx;
			}
			position: absolute;
			width: 30%;
			height: 100%;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: red;
			color: #fff;
			z-index: 2;
		}
		.carrier {
			@keyframes showMenu {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(-30%);
				}
			}
			@keyframes closeMenu {
				0% {
					transform: translateX(-30%);
				}
				100% {
					transform: translateX(0);
				}
			}
			&.open {
				animation: showMenu 0.25s linear both;
			}
			&.close {
				animation: closeMenu 0.15s linear both;
			}
			background-color: #fff;
			.checkbox-box {
				padding-left: 20upx;
				flex-shrink: 0;
				height: 22vw;
				margin-right: 20upx;
			}
			position: absolute;
			width: 100%;
			padding: 0 0;
			height: 100%;
			z-index: 3;
			display: flex;
			align-items: center;

			.goods-info {
				width: 100%;
				display: flex;
				padding-right: 20upx;
				.img {
					width: 22vw;
					height: 22vw;
					border-radius: 10upx;
					overflow: hidden;
					flex-shrink: 0;
					margin-right: 10upx;
					image {
						width: 22vw;
						height: 22vw;
					}
				}
				.info {
					width: 67%;
					height: 22vw;
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;
					position: relative;
					.title {
						width: 90%;
						font-size: 28upx;
						// text-align: justify;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 32upx;
						font-family: Droid Sans Fallback;
						font-weight: 400;
						color: rgba(0, 0, 0, 1);
					}
					.spec {
						font-size: 24upx;
						color: #a7a7a7;
						height: 30upx;
						align-items: center;
						padding: 0 10upx;
						padding-top: 10upx;
						border-radius: 15upx;
						margin-bottom: 30upx;
						margin-top: 5upx;
					}
					.price-number {
						// position: absolute;
						width: 400rpx;
						// bottom: 0upx;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						font-size: 28upx;
						height: 40upx;
						.price {
						}
						.number {
							display: flex;
							justify-content: center;
							align-items: flex-end;
							.input {
								width: 50upx;
								height: 50upx;
								margin: 0 10upx;
								// background-color: #f3f3f3;
								input {
									width: 50upx;
									height: 50upx;
									display: flex;
									justify-content: center;
									align-items: center;
									text-align: center;
									font-size: 26upx;
								}
							}
							.sub,
							.add {
								width: 40upx;
								height: 40upx;
								background-color: #f2f2f2;
								border-radius: 50%;
								.icon {
									font-size: 22upx;
									width: 40upx;
									height: 40upx;
									display: flex;
									justify-content: center;
									align-items: center;
									color: #ffffff;
								}
							}
							.add {
								background-color: #ff0000;
							}
							.sub {
								.icon {
									color: #b3b3b3;
								}
							}
						}
					}
				}
			}
		}
	}
}
.footer {
	width: 100%;
	padding: 0 4%;
	background-color: #fbfbfb;
	height: 100upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28upx;
	position: fixed;
	bottom: 0upx;
	z-index: 5;
	.delBtn {
		border: solid 1upx #ff0000;
		// color: #ff0000;
		padding: 0 20upx;
		height: 40upx;
		border-radius: 30upx;
		display: flex;
		font-size: 24upx;
		justify-content: center;
		align-items: center;
	}
	.settlement {
		width: 60%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.sum {
			width: 50%;
			font-size: 24upx;
			margin-right: 10upx;
			display: flex;
			justify-content: flex-end;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			.money {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
			}
		}
		.btn {
			width: 280upx;
			height: 76upx;
			line-height: 76upx;
			text-align: center;
			border-radius: 38px;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.dianpu_list {
	// height: 160upx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 21px 0px rgba(255, 74, 44, 0.1);
	border-radius: 15upx;
	box-sizing: border-box;
	padding: 20upx 30upx;
	position: relative;
	margin-top: 40upx;
	overflow: hidden;
	> image {
		width: 80upx;
		height: 80upx;
		float: left;
		border-radius: 50%;
		margin-top: 20upx;
	}
	.right_box {
		float: left;
		text-align: left;
		margin-left: 20upx;
		width: 80%;
		image {
			width: 30upx;
			height: 26upx;
			float: left;
			margin-top: 5upx;
		}
		.p1 {
			width: 100%;
			text-align: left;
			.text0 {
				font-size: 28upx;
				color: #333333;
			}
			.text2 {
				float: right;
				font-size: 24upx;
				color: #999999;
			}
		}
		.p2 {
			text-align: left;
			font-size: 24upx;
			color: #999999;
		}
		.text1 {
			font-size: 24upx;
			width: 70%;
			float: left;
			margin-left: 10upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #999999;
		}
	}
	.p4{
		height: 60upx;
		line-height: 60upx;
		margin-top: 10upx;
		image{
			height: 30upx;
			width: 30upx;
			float: left;
			margin-top: 15upx;
		}
		text{
			font-size: 24upx;
			color: #999999;
			float: left;
			margin-left: 20upx;
		}
	}
	.moren {
		position: absolute;
		width: 120upx;
		height: 36upx;
		// background: rgba(242, 58, 58, 1);
		border-radius: 6upx;
		color: #ffffff;
		font-size: 22upx;
		top: -15upx;
		text-align: center;
	}
	.xuanze {
		width: 100upx;
		height: 46upx;
		line-height: 46upx;
		background: rgba(242, 58, 58, 1);
		border-radius: 23upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		font-size: 22upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}
}
.guanggao {
	width: 686upx;
	height: 27vw;
	position: absolute;
	overflow: hidden;
	bottom: 110upx;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 8upx;
}
// 购物车空的
.notGood {
	// margin-top: 50upx;
	overflow: hidden;
	margin-bottom: 450upx;
	margin-top: 100upx;
	image {
		width: 100upx;
		height: 110upx;
		display: block;
		margin: 0 auto;
	}
	.tips {
		font-size: 28upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 40upx;
		text-align: center;
	}
	.p2 {
		width: 352upx;
		height: 76upx;
		line-height: 76upx;
		background: rgba(255, 0, 0, 1);
		border-radius: 38upx;
		font-size: 32upx;
		text-align: center;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: rgba(255, 255, 255, 1);
		margin: 0 auto;
		margin-top: 40upx;
	}
}
</style>
